<template>
  <view>
    <view
      class="player-item"
      v-for="(player, index) in playerList"
      :key="index"
    >
      <image :src="getOneFromCover(player.cover)" class="player-img" />
      <view class="player-info">
        <view class="player-header">
          <view class="player-name">
            {{ player.tittle }}
          </view>
        </view>
        <text class="player-desc">{{ player.intro }}</text>
        <view class="player-btn-container">
          <button
            class="player-btn"
            type="primary"
            size="mini"
            @tap="playerSuccess(player.id)"
          >
            通过
          </button>
          <button
            class="player-btn"
            type="warn"
            size="mini"
            @tap="playerReject(player.id)"
          >
            拒绝
          </button>
        </view>
      </view>
    </view>
    <view>
      <!-- 输入框示例 -->
      <uni-popup ref="rejectDialog" type="dialog">
        <uni-popup-dialog
          ref="inputClose"
          mode="input"
          v-model="reason"
          title="拒绝理由"
          placeholder="请输入拒绝理由"
          @confirm="dialogInputConfirm"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  playerParamsType,
  playerResponseType,
  PublishState,
} from "@/types/vote";
import {
  getPlayerListAPI,
  auditPlayerAPI,
  rejectPlayerAPI,
} from "@/api/player";
import { getOneFromCover } from "@/utils/vote";

onLoad(async () => {
  await getPlayerList();
});

// 接收页面参数
const query = defineProps<{
  id: string;
}>();

const pageParams: playerParamsType = reactive({
  actId: query.id,
  page: 1,
  size: 999,
  state: PublishState.pending,
  tittle: "",
});

const playerList = ref<playerResponseType[]>([]);

const reason = ref("");

const rejectDialog = ref<UniHelper.UniPopupInstance>();
const inputClose = ref<any>();

// 存储被拒绝选手的id
const rejectPlayerId = ref("");

// 获取选手列表
const getPlayerList = async (searchValue: string = "") => {
  pageParams.tittle = searchValue;
  const res = await getPlayerListAPI(pageParams);
  playerList.value = res.data.records;
};

//审核通过选手
const playerSuccess = async (playerId: string) => {
  await auditPlayerAPI(playerId);
  await getPlayerList(pageParams.tittle);
  uni.showToast({
    title: "审核通过成功",
    icon: "success",
    duration: 1000,
  });
};

//审核拒绝选手
const playerReject = (playerId: string) => {
  rejectPlayerId.value = playerId;
  reason.value = "";
  inputClose.value.val = "";
  console.log("inputClose", inputClose);
  rejectDialog.value?.open?.();
};

const dialogInputConfirm: UniHelper.UniPopupDialogOnConfirm = async () => {
  if (!reason.value) {
    uni.showToast({
      title: "拒绝失败，请输入拒绝理由！",
      icon: "none",
      duration: 1000,
    });
    rejectDialog.value?.open?.();
  } else {
    await rejectPlayerAPI(rejectPlayerId.value, reason.value);
    await getPlayerList(pageParams.tittle);
    uni.showToast({
      title: "拒绝成功",
      icon: "success",
      duration: 1000,
    });
    rejectDialog.value?.close?.();
  }
};

defineExpose({ getPlayerList });
</script>
<style scoped lang="scss">
.player-item {
  display: flex;
  margin: 10rpx 0;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
  .player-img {
    width: 200rpx;
    height: 200rpx;
  }
  .player-info {
    flex-grow: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .player-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .player-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
    }
    .player-desc {
      font-size: 24rpx;
      color: #666;
    }
    .player-btn-container {
      display: flex;
      justify-content: flex-end;
      .player-btn {
        margin: 0 10rpx;
      }
    }
  }
}
</style>
